<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: #f00;
        }
        .a{
            width: 300px;
            height: 300px;
            background-color: #ff0;
        }
        .b{
            width: 200px;
            height: 200px;
            background-color: #f0f;
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="a">
            <div class="b"></div>
        </div>
    </div>

    <script>


        // 事件流：页面接受事件的顺序  事件冒泡流 / 事件捕获流
        //    事件冒泡：事件从内向外触发
        //    事件捕获：事件由外向内触发




          
        // 事件机制和事件流

            // 什么是事件流：事件流描述的是从页面中接受事件的顺序

            // 但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)

            // 事件捕获：事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件

            // 事件冒泡：IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点


            // IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

            // 事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段



        var oBox = document.querySelector('.box') ;
        var oA = document.querySelector('.a') ;
        var oB = document.querySelector('.b') ;


        // 默认为事件冒泡
        // oBox.addEventListener('click' , function() {
        //     console.log('box');
        // })

        // oA.addEventListener('click' , function() {
        //     console.log('a');
        // })

        // oB.addEventListener('click' , function() {
        //     console.log('b');
        // })


        // 支持事件捕获   addEventListener(事件类型，事件处理函数，是否支持事件捕获)
        oBox.addEventListener('click' , function() {
            console.log('box');
        } , true)

        oA.addEventListener('click' , function() {
            console.log('a');
        }, true)

        oB.addEventListener('click' , function() {
            console.log('b');
        }, true)

    </script>
    
</body>
</html>